<template lang="pug">
	div(:style="{height: 43 + height + 'px'}")
		div.tabnavBox(ref="scrollContainer" :style="{height: 38 + height + 'px'}")
			transition-group(name="list" tag="ul" ref="ul")
				li.tabnav(v-for="(item, index) in $store.getters.tabnavBox" :style="{marginBottom: height + 'px'}"
									@contextmenu.prevent="openMenu(item,$event,index)" :key="item.title" ref="list"
									:class="$route.path === item.path ? 'router-link-exact-active router-link-active active' : ''"
				)
					router-link(:to="item.path" ref="tag") {{ item.title }}
					i.el-icon-close(@click="removeTab(item)" v-if="index !== 0")

</template>

<script>
	const tagAndTagSpacing = 4
	export default {
		name: "tabNav",
		data () {
			return {
				left: 0,
				top: 0,
				height: 0
			}
		},
		watch: {
			'$route' (val) {
				const windowWidth = window.innerWidth > 1200 ? window.innerWidth : 1200
				setTimeout(() => {
					const width = this.$refs.scrollContainer.scrollWidth
					const length = this.$refs.list.length
					const slide = this.$store.getters.isCollapse ? 64 : 200

					if ( width - 62 - (length * 107) < -102 ) this.$store.dispatch("removeTabNav")
					else if (width * .95 > windowWidth - slide - this.getScrollBarWidth()) {
						this.$store.dispatch("removeTabNav")
						// if (navigator.userAgent.indexOf('Macintosh') != -1) this.height = 5
						// else this.height = 15
					}
					// else  this.height = 0
					
				}, 10);

				// const tags = this.$refs.tag
				// setTimeout(() => {
				// 	for (const tag of tags) {
				// 		if (tag.to === val.path) {
				// 			this.moveToTarget(tag)
				// 		}
				// 	}
				// }, 10)
				
			}
		},
		computed: {
			scrollWrapper() {
				return this.$refs.scrollContainer
			}
		},
		methods: {
			moveToTarget(currentTag) {
				let current = currentTag.$el.parentNode
				const $containerWidth = this.scrollWrapper.offsetWidth
				const $scrollWrapper = this.scrollWrapper
				const tagList = this.$refs.list

				let firstTag = null
				let lastTag = null

				if (tagList.length > 0) {
					firstTag = tagList[0]
					lastTag = tagList[tagList.length - 1]
				}

				if (firstTag === current) {
					$scrollWrapper.scrollLeft = 0
				} else if (lastTag === current) {
					$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth  + 200 - $containerWidth	
				} else {
					const currentIndex = tagList.findIndex(item => {
						return item === current
					})
					const prevTag = tagList[currentIndex - 1]
					const nextTag = tagList[currentIndex + 1]

					const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing

					const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing

					if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
						$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth + 200
					} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
						$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft - 200
					}
				}
			},
			openMenu (item, e, index) {
				if (index === 0) {
					return false
				}
				this.left = e.clientX + 10
				this.top = e.clientY
				this.$store.dispatch("openMenu", item)
			},
			removeTab (tabItem) {
				if (tabItem.path != this.$route.path) {
					const windowWidth = window.innerWidth > 1200 ? window.innerWidth : 1200
					if (this.$refs.scrollContainer.scrollWidth > windowWidth - 200) {
						if (navigator.userAgent.indexOf('Macintosh') != -1) this.height = 5
						else this.height = 15
					} else  this.height = 0
				}
				this.$store.dispatch("removeTab", {tabItem, fullPath: this.$route.fullPath, router: this.$router})
		
			},
			getScrollBarWidth() { //获取浏览器滚动条的宽
				let el = document.createElement("p"),
						styles = {
								width: "100px",
								height: "100px",
								overflowY: "scroll"
						},
						i;
				// 这里很巧妙呀，先定义了一个styles对象，里面写了各种样式值，然后通过for in将这个对象的值赋给p元素的style对象
				// 而不用通过style.width=***等来给p的样式对象赋值。
				for (i in styles) el.style[i] = styles[i]
				// 将元素加到body里面
				document.body.appendChild(el)
				var scrollBarWidth = el.offsetWidth - el.clientWidth
				//将添加的元素删除
				el.remove()
				return scrollBarWidth
			}
		}
	}
</script>
<style>
  .tabnav {
		z-index: 999;
    display: inline-block;
    transition: all 0.5s;
  }

  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);

  }

  .list-enter-active {
    transition: all 0.5s;
  }

  .list-leave-active {
    position: absolute;
    transition: all 1s;
  }
</style>
<style lang="scss">
  $top: top;
  $bottom: bottom;
  $left: left;
  $right: right;
  $leftright: ($left, $right);

  %w100 {
    width: 100%;
  }

  %h100 {
    height: 100%;
  }

  %cursor {
    cursor: pointer;
  }

  @mixin set-value($side, $value) {
    @each $prop in $leftright {
      #{$side}-#{$prop}: $value;
    }
  }

  .tabnavBox {
    @extend %w100;
    height: 38px;
    min-height: 38px;
		background: #fff;
    overflow: hidden;
    border-#{$top}: 1px solid #f6f6f6;
    border-#{$bottom}: 1px solid #d8dce5;

    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    ul {
      display: flex;
      justify-content: flex-start;
      padding-#{$left}: 5px;
      flex-wrap: nowrap;
      /* overflow-x: auto; */
      li {
        height: 25px;
        line-height: 25px;
				margin-bottom: 10px;
        display: flex;
        align-items: center;
        @extend %cursor;
        margin-#{$top}: 6px;
        margin-#{$right}: 5px;

        border: 1px solid #cccccc;

        overflow: hidden;
				min-width: 50px;
				&:not(:first-child) {
          padding-#{$right}: 10px;
          min-width: 90px;
        }
        a {
          @include set-value(padding, 12px);
          display: inline-block;
          @extend %h100;
          font-size: 12px;
          color: #999999;
        }
        &:nth-child(n+2) {
          a {
            padding-#{$right}: 10px;
          }
        }
        i {
          @extend %cursor;
          &:hover {
            color: red;
          }
        }
      }
      li.active {
        background: #409eff;
        color: #ffffff;
        a {
          color: #ffffff;
        }
      }
    }
		.el-icon-close {
			font-size: 12px;
			color: #999;
			&:hover {
				color: #409EFF;
			}
		}
		.active .el-icon-close {
			color:#fff;
		}
  }

  .menuBox {
    margin: 0;
    background: #fff;
    z-index: 999;
    position: absolute;
    padding: 5px 0;
    border: 1px solid #cccccc;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 1px 6px 0 rgba(0, 0, 0, .3);
    li {
      margin: 0;
      padding: 7px 12px;
      @extend %cursor;
      &:hover {
        background: #e1e6ea;
      }
    }
  }
</style>
